<template>
	<view class="text-center" @tap="QRClick">
		<view class="win">
			<view class="border_corner border_corner_left_top"></view>
			<view class="border_corner border_corner_right_top"></view>
			<view class="border_corner border_corner_left_bottom"></view>
			<view class="border_corner border_corner_right_bottom"></view>
			<view class="Line"></view>
		</view>
	</view>
</template>

<script>
export default {
  props:{
  },
  methods: {
    QRClick() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="less" scope>
@import '@/common/style/main.css';
	.win {
		margin-top: 100upx;
		width: 250upx;
		height: 250upx;
		position: relative;
		display: inline-block;
	}
	
	.border_corner {
		z-index: 11;
		position: absolute;
		width: 40upx;
		height: 40upx;
		background: rgba(0, 0, 0, 0);
		border: 4upx solid #aaa;
	}
	
	.border_corner_left_top {
		top: 0;
		left: 0;
		border-right: none;
		border-bottom: none;
		border-top-left-radius: 8upx;
	}
	
	.border_corner_right_top {
		top: 0;
		right: 0;
		border-left: none;
		border-bottom: none;
		border-top-right-radius: 8upx;
	}
	
	.border_corner_left_bottom {
		bottom: 0;
		left: 0;
		border-right: none;
		border-top: none;
		border-bottom-left-radius: 8upx;
	}
	
	.border_corner_right_bottom {
		bottom: 0;
		right: 0;
		border-left: none;
		border-top: none;
		border-bottom-right-radius: 8upx;
	}
	
	.Line {
		margin-top: 140upx;
		margin-left: -75upx;
		width: 400upx;
		height: 4upx;
		background: linear-gradient(244deg, rgba(18, 181, 176, 0) 0%, rgba(18, 181, 176, 1) 50%, rgba(18, 181, 176, 0) 100%);
		z-index: 1;
	}
</style>
